<template>
	<view id="loginPage">
		<view class="title">
			电力安全工器具
		</view>
		<view class="title second">
			全流程管理
		</view>
		<view class="input-wrapper">
			<image class="pre-ico" src="../../static/img/user.png" mode="aspectFit"></image>
			<input v-model="account" class="input" focus placeholder="请输入用户名" />
		</view>
		<view class="input-wrapper">
			<image class="pre-ico" src="../../static/img/lock.png" mode="aspectFit"></image>
			<input v-model="password" class="input" type="password" placeholder="请输入密码" />
		</view>
		<view class="submit-wrapper">
			<button class="submit-btn" type="primary" @click="login">登录</button>
		</view>
	</view>
</template>

<script>
import api from '../../consts/api.js'
import { setFetch } from '../../consts/config.js'

export default {
	data() {
		return {
			account: '',
			password: ''
		}
	},
	onLoad() {

	},
	methods: {
		login() {
			let that = this
			uni.request({
				url: api.login,
				method: 'POST',
				data: {
					account: that.account,
					password: window.btoa(that.password)
				},
				success: res => {
					let {code, data, message} = res.data
					if (code === 0) {
						setFetch(data.access_token)
						sessionStorage.setItem('token', data.access_token)
						that.toHome()
					} else {
						uni.showToast({
							title: message
						});
					}
					
				},
				fail: () => {},
				complete: () => {}
			});
		},
		toHome() {
			uni.navigateTo({
				url: '../home/home',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		}
	}
}
</script>

<style>
	.title {
		font-size: 80upx;
		text-align: center;
		color: var(--primaryColor);
		margin: 40upx auto;
	}
	.second {
		margin-bottom: 160upx;
	}
	.input-wrapper {
		width: 80%;
		display: flex;
		margin: 40upx auto;
		height: 100upx;
		border: 1upx solid var(--primaryColor);
		border-radius: 80upx;
	}

	.pre-ico {
		width: 40upx;
		height: 40upx;
		margin: 30upx 10upx 20upx 40upx;
	}
	.input {
		height: 80upx;
		margin: 10upx;
	}
	.submit-wrapper {
		margin: 160upx auto 0;
		width: 80%;
	}
	.submit-btn {
		background: var(--primaryColor);
	}
</style>
